<template>
  <div class="app-container">
    <el-form ref="mainForm" size="medium" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="formData.name" placeholder="设备名称" clearable disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型" prop="dist">
            <el-select v-model="dist" placeholder="设备类型" clearable filterable disabled>
              <el-option
                v-for="(item,index) in deviceTypes"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="关联配置" prop="name">
        <el-table
          :data="ports"
          style="width: 100%"
          border
        >
          <el-table-column
            prop="name"
            label="属性名称"
            align="center"
            width="300px"
          />
          <el-table-column
            prop="position"
            label="位置"
            align="center"
          >
            <template v-slot="scope">
              <el-input v-model="scope.row.fieldSensor.position" placeholder="位置" type="number">
                <template slot="append">cm</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dataSources, deviceTypes } from '@/utils/constant'
import { rtuPorts } from '@/api/initial'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dataSources,
      deviceTypes,
      ports: [],
      rules: {},
      dist: 1
    }
  },
  computed: {
    dataSource() {
      return this.ports && this.ports.length > 0 && this.ports[0].fieldSensor && this.ports[0].fieldSensor.data_source || ''
    }
  },
  watch: {
    'formData.serialno': {
      handler(newVal, oldVal) {
        if (newVal.indexOf('0202.0007') > -1) {
          this.getRtuPorts(newVal)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async getRtuPorts(serialno) {
      const { data } = await rtuPorts(serialno)
      this.ports = data
    },
    submit() {
      const datas = this.ports.map(val => val.fieldSensor)
      this.$emit('submit', datas)
    },
    reset() {
      console.log('reset')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
